import { useEffect, useRef, useState } from 'react';
import VideoJS from '../videoJS';
import { Row, Col, Carousel, Image, Typography } from 'antd';
import classNames from 'classnames';
import { SlickArrowLeft, SlickArrowRight } from '../slickArrow';
import styles from './index.less';
const { Text, Paragraph } = Typography;

const classInfo = {
  data: {
    result: {
      id: 1096,
      bjNo: 'xjwdsxx0201',
      bjName: '二年级一班',
      bjMaster: 'xjwdsxx009',
      bjStCount: 0,
      addOn: '2017-11-08 11:44:21',
      addBy: 'xjwdsxx',
      gradeGroup: 3,
      flagDelete: 0,
      isTopClass: 0,
      xxNo: '150622zgeqxjwdsxx',
      classBadge: 'http://demo-assets.iwisesoft.com/classBadge/150622zgeqxjwdsxx/xjwdsxx0201.jpg',
      classMotto: '自立\n自强\n自信\n自主\n积极\n向上',
      masterName: '白俊红',
      xxName: '测试学校',
      gradeGroupName: '三年级',
      cultures: [
        {
          type: 'image',
          url: 'http://demo-assets.iwisesoft.com/class_culture/150622zgeqxjwdsxx/xjwdsxx0201/E8AE1590-B5F0-4B73-98E6-F07AE05F65AA.jpeg',
          preview:
            'http://demo-assets.iwisesoft.com/class_culture/150622zgeqxjwdsxx/xjwdsxx0201/E8AE1590-B5F0-4B73-98E6-F07AE05F65AA.jpeg',
        },
        {
          type: 'image',
          url: 'http://demo-assets.iwisesoft.com/class_culture/150622zgeqxjwdsxx/xjwdsxx0201/ED91F0E5-B80E-475B-A828-670CD8494965.jpeg',
          preview:
            'http://demo-assets.iwisesoft.com/class_culture/150622zgeqxjwdsxx/xjwdsxx0201/ED91F0E5-B80E-475B-A828-670CD8494965.jpeg',
        },
      ],
      rules: null,
      idNe: 0,
      idList: null,
    },
  },
};
export default () => {
  return (
    <div className={classNames('class-culture-wrapper', styles.wrapper)}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="40px">
          <Row
            className={classNames('class-culture-title', styles.title)}
            justify="center"
            onClick={() => setModalVisible(true)}
          >
            <img
              src={
                classInfo.data?.result
                  ? classInfo.data.result.classBadge
                  : 'https://image.iwisesoft.com/system/class_badge.png'
              }
              style={{ display: 'block' }}
            />
            <span style={{ marginLeft: 10 }}>班级文化</span>
          </Row>
        </Col>
        <Col flex="70px">
          <Row justify="center" className={styles.motto}>
            <Paragraph
              ellipsis={{
                rows: 2,
                expandable: true,
                symbol: '更多',
                onExpand: (e) => {
                  setparagraphKey(new Date().getTime());
                  setTooltipOpen(true);
                },
              }}
              style={{ color: 'inherit', width: 180, marginBottom: 0 }}
            >
              {classInfo.data?.result?.classMotto}
            </Paragraph>
          </Row>
        </Col>
        <Col flex="auto">
          <Row justify="center" className={styles.cultureContent}>
            <Col id="culture_slider">
              <div className="shadow-mask" />
              <Image.PreviewGroup>
                <Carousel
                  autoplay
                  autoplaySpeed={5000}
                  dots={false}
                  arrows
                  prevArrow={<SlickArrowLeft />}
                  nextArrow={<SlickArrowRight />}
                >
                  {classInfo.data?.result?.cultures?.map((x, i) => {
                    if (x.type === 'image') {
                      return (
                        <div key={x.url}>
                          <Row justify="center">
                            <Image
                              width={150}
                              height={150}
                              src={x.preview || x.url}
                              preview={{ src: x.url }}
                            />
                          </Row>
                        </div>
                      );
                    }
                    return (
                      <VideoJS
                        key={x.url}
                        autoPlay="autoplay"
                        width={150}
                        height={150}
                        src={x.url}
                        loop="loop"
                        muted="muted"
                      />
                    );
                  })}
                </Carousel>
              </Image.PreviewGroup>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
